<template>
	<view class="cancel_box">
		<view class="cancel_tit">
			<BwIcon :name="name" color="#007AFF" :size="200" unit="rpx"></BwIcon>
			<view class="pay_tips" v-if="name=='close-fill'">
				订单支付失败
			</view>
			<view class="pay_tips" v-if="name=='circle-fill'">
				订单支付成功
			</view>
		</view>
		<view class="pay_info">
			<view class="pay_info_item">
				<view class="">
					订单编号
				</view>
				<view class="">
					{{order_info.order_no}}
				</view>
			</view>
			<view class="pay_info_item">
				<view class="">
					下单时间
				</view>
				<view class="">
					{{order_info.create_time}}
				</view>
			</view>
			<view class="pay_info_item">
				<view class="">
					支付方式
				</view>
				<view class="">
					{{payment}}
				</view>
			</view>
			<view class="pay_info_item">
				<view class="">
					支付金额
				</view>
				<view class="">
					{{order_info.pay_price}}
				</view>
			</view>
			<view class="pay_info_item">
				<view class="">
					失败原因
				</view>
				<view class="">
					取消支付
				</view>
			</view>
			<view class="button_box">
				<view class="again_btn" @click="againBtn" v-if="name=='close-fill'">
					重新支付
				</view>
				<view class="again_btn" @click="againBtn" v-if="name=='circle-fill'">
					查看订单详情
				</view>
				<view class="back_btn" @click="backBtn">
					返回列表（按需求可修改）
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import BwIcon from "../../components/bw-icon/bw-icon.vue"
	import {orderDetail} from "../../api/order.js"
	export default {
		components:{
			BwIcon
		},
		data(){
			return {
				order_info:{},
				order_id:"",
				name:"",
				payment:"",
			}
		},
		onBackPress(e){
		  console.log("监听返回按钮事件",e);
		//返回主页面tabBar
		uni.switchTab({
			url:"/"
		})
		  // 此处一定姚要return为true，否则页面不会返回到指定路径
		  return true;
		},
		onLoad(point) {
			this.name=point.name
			this.order_id=point.order_id
			orderDetail({
				order_no:point.order_id
			}).then(res=>{
				this.order_info=res.data
				if(this.order_info.pay_type==0){
					this.payment="余额"
				}
			})
		},
		methods:{
			//重新支付
			againBtn(){
				uni.navigateTo({
					url:"/pages/Mine/orderInfo/orderInfo2?order_id="+this.order_id
				})
			},
			//返回首页
			backBtn(){
				uni.navigateTo({
					url:"/pages/shop/shopList"
				})
			}
		}
	}
	
</script>

<style lang="scss" scoped>
	.cancel_box{
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		.cancel_tit{
			margin: 100rpx 0 50rpx 0;
			.pay_tips{
				font-size: 36rpx;
				font-weight: bolder;
			}
		}
		.pay_info{
			width: 90%;
			.pay_info_item{
				width: 100%;
				display: flex;
				justify-content: space-between;
				margin: 30rpx 0;
				color: #666666;
				font-weight: 600;
			}
			.button_box{
				width: 100%;
				margin-top: 60rpx;
				.again_btn{
					width: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					height: 80rpx;
					border: 1px solid #007AFF;
					border-radius: 60rpx;
					margin-bottom: 20rpx;
					background-color: #007AFF;
					color: #E7E7E7;
					
				}
				.back_btn{
					width: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					height: 80rpx;
					border: 1px solid #007AFF;
					border-radius: 60rpx;
					color: #007AFF;
				}
			}
		}
	}
</style>
